<!DOCTYPE html>
<html>
<head>
 	<meta charset="utf-8">
 <title>日历</title>
 <style type="text/css">
	 *{ margin:0; padding:0;}
	 a{ text-decoration:none; outline:none;}
	 body a{outline:none;blr:expression(this.onFocus=this.blur());}
	 img{ border:none;}
	 ul{ list-style:none;}
	 body{ color:#666666; font-size:14px; font-family:"微软雅黑"; background-color:#fff; height:100%; overflow-y:scroll;*overflow-y:inherit;}
	 /*html{ height:100%;}*/
	 .clearfix:after{ content:"."; display:block; height:0; clear:both; overflow:hidden;}
	 .clearfix{ zoom:1;}
	  
	  
	 #box{width:350px; position:absolute;}
	 #title{width:350px; height:50px;}
	 #month{ float:left;width:60px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
	 #year{float:left;width:80px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
	 #week{ width:350px;height:50px;}
	 #week div{ float:left; width:48px; height:48px; margin:1px; background:#C90; color:#fff; text-align:center; line-height:48px; cursor:pointer;}
	 #con{ width:350px;}
	 #con div{ float:left; width:48px; height:48px; margin:1px; background:#CCC; color:#333; text-align:center; line-height:48px; cursor:pointer;}
	 #con .edate{background:#999;}
	 #con .edate:hover{background:#09F; color:#fff;}
	 #con div.now{background:#09F; color:#fff;}
	   
	 #prevmonth,#nextmonth,#prevyear,#nextyear{float:left;width:50px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
	   
	 #btns{width:350px; height:40px;}
	 #nowtime{ float:left; margin:5px; height:30px; line-height:30px; padding:0 5px; background:#09F; cursor:pointer; border-radius:5px;}
	 #nowtime:hover{background:#ddd;}
	 #cleartime{float:left; margin:5px; height:30px; line-height:30px; padding:0 5px; background:#09F; cursor:pointer; border-radius:5px;}
</style>
</head>
<body>
 <p style=" margin:100px;">选择日期：<input type="text" id="date" value="" style="height:40px; line-height:40px;"readonly='readonly' placeholder="   日历控件"/></p> 
</body>
<script type="text/javascript">
	window.onload=function(){ 
		//创建日历控件基本结构 
		var obody=document.body;
		createbox();
		function createbox(){
		    
			var ddbox=document.createElement("div");
			ddbox.id="box";
			ddbox.style.display="none";
			var str="";
			str+='<div id="title"><div id="prevyear"><<</div><div id="prevmonth"><</div><div id="month"></div><div id="year"></div><div id="nextmonth">></div><div id="nextyear">>></div></div>';
			str+='<div id="week"><div>日</div><div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div></div>';
			str+='<div id="con" class="clearfix"></div>';
			str+='<div id="btns"><div id="nowtime">当前时间</div><div id="cleartime">清空</div></div>';
			ddbox.innerHTML=str;
			obody.appendChild(ddbox);   
		};
		//===================get ele=============================== 
		var omonth=document.getElementById("month");
		var oyear=document.getElementById("year");
		var con=document.getElementById("con");
		var prevmonth=document.getElementById("prevmonth");
		var nextmonth=document.getElementById("nextmonth");
		var prevyear=document.getElementById("prevyear");
		var nextyear=document.getElementById("nextyear");
		var nowtime=document.getElementById("nowtime");
		var date=document.getElementById("date");
		var box=document.getElementById("box");
		var cleartime=document.getElementById("cleartime");
		 //===================show date===============================
		date.onfocus=function(){//显示控件
			var datel=this.getBoundingClientRect().left;
			var datet=this.getBoundingClientRect().top+40;
			box.style.left=datel+"px";
			box.style.top=datet+"px";
			box.style.display="block";
		}; 
		con.onclick=function(event){
		  	if(event.target.tagName=="DIV" && event.target.nodeType=="1" && hasclass(event.target.className,"edate")){
		   	date.value="";
		  	date.value=dateObj.getFullYear()+"-"+toyear(dateObj)+"-"+event.target.innerHTML;
		  	box.style.display="none";
		  	};
		};
		cleartime.onclick=function(event){
		  	date.value="";
		};
		//===================set year month===============================
		//默认时间对象
		var dateObj = new Date();
		//动态控制
		prevmonth.onclick=function(){//上一月
			var ddm=null;
			var ddy=null;
			if((dateObj.getMonth()-1)==-1){
			   	ddm=11;
			   	ddy=dateObj.getFullYear()-1;
			}else{
			   	ddm=dateObj.getMonth()-1;
			   	ddy=dateObj.getFullYear();
			};
			dateObj.setFullYear(ddy);
			dateObj.setMonth(ddm);
			omonth.innerHTML=toyear(dateObj)+"月";
			oyear.innerHTML=dateObj.getFullYear()+"年";
			remove();
			oneweek=oneyearoneday(dateObj);
			alld=alldays(dateObj);
			nowd=nowday(dateObj);
			init(oneweek,alld,nowd);
		};
		nextmonth.onclick=function(){//下一月
			var ddm=null;
			var ddy=null;
			if((dateObj.getMonth()+1)==12){
			   	ddm=0;
			   	ddy=dateObj.getFullYear()+1;
			}else{
			   	ddm=dateObj.getMonth()+1;
			   	ddy=dateObj.getFullYear();
			};
			  	dateObj.setFullYear(ddy);
			  	dateObj.setMonth(ddm);
			 	omonth.innerHTML=toyear(dateObj)+"月";
			  	oyear.innerHTML=dateObj.getFullYear()+"年";
			  	remove();
			  	oneweek=oneyearoneday(dateObj);
			  	alld=alldays(dateObj);
			  	nowd=nowday(dateObj);
			  	init(oneweek,alld,nowd);  
			};
		prevyear.onclick=function(){//上一年
		  	var ddy=dateObj.getFullYear()-1;
		  	dateObj.setFullYear(ddy);
		 	 oyear.innerHTML=dateObj.getFullYear()+"年";
		  	remove();
		  	oneweek=oneyearoneday(dateObj);
		  	alld=alldays(dateObj);
		  	nowd=nowday(dateObj);
		  	init(oneweek,alld,nowd);
		};
		nextyear.onclick=function(){//下一年
		  	var ddy=dateObj.getFullYear()+1;
		  	dateObj.setFullYear(ddy);
		  	oyear.innerHTML=dateObj.getFullYear()+"年";
		  	remove();
		  	oneweek=oneyearoneday(dateObj);
		  	alld=alldays(dateObj);
		  	nowd=nowday(dateObj);
		  	init(oneweek,alld,nowd);  
		}; 
		//返回到今时今日
		nowtime.onclick=function(){
		  	var dddate=new Date();
		  	var ddm=dddate.getMonth();
		  	var ddy=dddate.getFullYear();
		  	dateObj.setFullYear(ddy);
		  	dateObj.setMonth(ddm);
		  	omonth.innerHTML=toyear(dateObj)+"月";
		  	oyear.innerHTML=dateObj.getFullYear()+"年";
		  	remove();
		  	oneweek=oneyearoneday(dateObj);
		  	alld=alldays(dateObj);
		  	nowd=nowday(dateObj);
		  	init(oneweek,alld,nowd);  
		};
		//年月获取 
		var year=dateObj.getFullYear();
		var month=toyear(dateObj);//0是12月
		//月年的显示
		omonth.innerHTML=month+"月";
		oyear.innerHTML=year+"年";
		//===================set day===============================
		  
		//获取本月1号的周值
		var oneweek=oneyearoneday(dateObj);
		//本月总日数
		var alld=alldays(dateObj);
		//当前是几
		var nowd=nowday(dateObj);
		//初始化显示本月信息
		init(oneweek,alld,nowd);
		   
		//===================function===============================
		//有无指定类名的判断
		function hasclass(str,cla){
		  	var i=str.search(cla);
		  	if(i==-1){
		   		return false;
		  	}else{
		   		return true;
		  	};
		};
		//初始化日期显示方法
		function remove(){
		  	con.innerHTML="";
		};
		function init(oneweek,alld,nowd){
		  	for(var i=1;i<=oneweek;i++){//留空
		   		var eday=document.createElement("div");
		   		eday.innerHTML="";
		   		con.appendChild(eday);
		  	};
		  	for(var i=1;i<=alld;i++){//正常区域
		   		var eday=document.createElement("div");
		   		if(i==nowd){     
		    		eday.innerHTML=i;
		    		eday.className="now edate";
		    		con.appendChild(eday);
		   		}else{
		    		eday.innerHTML=i;
		    		eday.className="edate";
		    		con.appendChild(eday);
		   		};
			};
		};
		//获取本月1号的周值
		function oneyearoneday(dateObj){
		  	var oneyear = new Date();
		  	var year=dateObj.getFullYear();
		  	var month=dateObj.getMonth();//0是12月
		  	oneyear.setFullYear(year);
		  	oneyear.setMonth(month);//0是12月
		  	oneyear.setDate(1);
		  	return oneyear.getDay();  
		};
		//当前是几
		function nowday(dateObj){
		  	return dateObj.getDate();
		};
		//获取本月总日数方法
		function alldays(dateObj){
		  	var year=dateObj.getFullYear();
		  	var month=dateObj.getMonth();
		  	if(isLeapYear(year)){//闰年
		   		switch(month) { 
			   		case 0: return "31"; break; 
			   		case 1: return "29"; break; //2月
			   		case 2: return "31"; break; 
			   		case 3: return "30"; break; 
			   		case 4: return "31"; break; 
			   		case 5: return "30"; break; 
			   		case 6: return "31"; break; 
			   		case 7: return "31"; break; 
			   		case 8: return "30"; break; 
			   		case 9: return "31"; break; 
			   		case 10: return "30"; break; 
			   		case 11: return "31"; break;   
			   		default:  
		   		};
		  		}else{//平年
		   		switch(month) { 
			   		case 0: return "31"; break; 
			   		case 1: return "28"; break; //2月 
			   		case 2: return "31"; break; 
			   		case 3: return "30"; break; 
			   		case 4: return "31"; break; 
			   		case 5: return "30"; break; 
			   		case 6: return "31"; break; 
			   		case 7: return "31"; break; 
			   		case 8: return "30"; break; 
			   		case 9: return "31"; break; 
			   		case 10: return "30"; break; 
			   		case 11: return "31"; break;   
			   		default:  
		   		};   
		  	};
		 };
		//闰年判断函数
		function isLeapYear(year){ 
		  	if( (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)){
		   		return true;
		  	}else{
		   		return false;
		  	}; 
		};
		//月份转化方法
		function toyear(dateObj){ 
		  	var month=dateObj.getMonth()
		  	switch(month) { 
			  	case 0: return "1"; break; 
			  	case 1: return "2"; break; 
			  	case 2: return "3"; break; 
			  	case 3: return "4"; break; 
			  	case 4: return "5"; break; 
			  	case 5: return "6"; break; 
			  	case 6: return "7"; break; 
			  	case 7: return "8"; break; 
			  	case 8: return "9"; break; 
			  	case 9: return "10"; break; 
			  	case 10: return "11"; break; 
			  	case 11: return "12"; break;   
			  	default: 
		  	}; 
		};
	};
</script>
</html>